<template>
	<view class="pageBox">
		<productConSwiper style="height: 740rpx;" class="skeleton-rect" :imgUrls="storeInfo.slider_image"
			:videoCoverImg='videoCoverImg' :videoline="storeInfo.video_link">
		</productConSwiper>
		<view class="titleBox">
			<view class="title">
				{{productInfo.store_name}}
			</view>
			<view class="title-btn">
				可租
			</view>
		</view>
		<view class="price-box">
			<view class="price-box-left">
				<view class="priceInfo">
					<text style="font-size: 30rpx;">会员价：¥</text> <text>{{productInfo.ot_price}}/天</text>
				</view>
				<view class="depositInfo">
					押金：{{productInfo.deposit_price}}
				</view>
			</view>
			<view class="price-box-right">
				分享
			</view>
		</view>
		<view class="saleInfo">
			<view class="manjianInfo">
				<view class="">
					活动满减
				</view>
				<view class="">
					满2000-500
				</view>
			</view>
			<view class="couponInfo" @click="viewCoupon">
				<view class="">
					优惠券
				</view>
				<view class="">
					向右箭头
				</view>
			</view>
		</view>
		<view class="store-box">
			<view class="classHeader">
				<view class="tip">

				</view>
				<view class="header-name">
					商品参数
				</view>
			</view>
			<view class="storeInfo">
				<view class="storeInfo-Box" style="border-bottom: 1rpx solid rgba(240, 240, 240, .6);">
					<view class="" @click="selecAttr">
						选择规格
					</view>
					<view class="">
						{{attrValue}}
					</view>
				</view>
			</view>
			<view class="storeInfo">
				<view class="storeInfo-Box">
					<view class="">
						参数
					</view>
					<view class="">
						信息信息信息信息
					</view>
				</view>
			</view>
		</view>
		<view class="Offline-box">
			<view class="classHeader">
				<view class="tip">
				</view>
				<view class="header-name">
					商品门店
				</view>
			</view>
			<!--  -->
			<view class="OfflineInfo">
				<image src="../static/images/product_freight.png" mode=""></image>
				<view class="OfflineInfo-Box">
					<view class="OfflineInfo-Box-name">
						门店名称门店名称
					</view>
					<view class="">
						<view class="">
							南宁市江南区星光大道100号
						</view>
						<view class="">
							>500m
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="choose-type-box">
			<view class="classHeader">
				<view class="tip">

				</view>
				<view class="header-name">
					选择租赁方式
				</view>
			</view>
			<view class="" style="width: 100%;justify-content: center;display: flex;"><u-subsection style="width: 80%;"
					:list="typelist" :current="1"></u-subsection>
			</view>
			<view class="choose-type-form">
				<view class="choose-type-title">
					预计使用天数
				</view>
				<view class="choose-type-input">
					<input type="text" placeholder="请输入天数" />
					<view class="">
						天
					</view>
				</view>
			</view>
			<view class="choose-type-form">
				<view class="choose-type-title">
					开始使用日期
				</view>
				<view class="choose-type-input" @click="chooseDate">
					{{dateInfo}}
					<u-calendar v-model="show" mode="date" @change="Datechange"></u-calendar>
				</view>
			</view>

		</view>
		<view class="goodDeatail-box">
			<view class="classHeader">
				<view class="tip">

				</view>
				<view class="header-name">
					商品详情
				</view>
			</view>
			<view class="goodDeatail-info">
			{{description.content}}
			</view>
		</view>
		<view class="pageFooter">
			<u-radio-group v-model="isYes" style="margin-left: 20rpx;">
				<u-radio :label-disabled="false">我已阅读并同意<text style="font-weight: 600;">《租赁商品协议》</text></u-radio>
			</u-radio-group>
			<view class="btn-box">
				<view class="btn-box-left">
					联系客服
				</view>
				<view class="btn-box-right" @click="goBuy">
					提交订单
				</view>
			</view>
		</view>
		<view class="" style="height: 300rpx;">

		</view>
		<u-popup v-model="couponShow" mode="bottom" height="600px" :closeable='true' :border-radius="20">
			<view class="couponPopup">
				<view class="couponPopup-title">
					领取优惠券
				</view>
				<view class="couponPopup">
					<view class="couponList" v-for="(item,index) in coupon" :key="index">
						<view class="couponEarn">
							<view class="" style="font-weight: 700;">
								¥<text style="font-size: 50rpx;">{{item.coupon_price}}</text>
							</view>
							<view class="" style="margin-top: 30rpx;">
								满{{item.full_reduction}}可用
							</view>
						</view>
						<view class="couponMid">
							<view class="couponMid-top">
								全部商品可用
							</view>
							<view class="couponMid-bot">
								有效期至{{item.coupon_time}}
							</view>
						</view>
						<view class="couponbtn">
							<view class="btnBox" @click="receiveCoupon(item)"
								style="background-color: orange;width: 100rpx;height: 60rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: white;"
								v-if="item.status==1">
								领取
							</view>
							<view class="btnBox"
								style="background-color: gray;width: 100rpx;height: 60rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: white;"
								v-if="item.status==0">
								已领取
							</view>
							<view class="btnBox"
								style="background-color: gray;width: 100rpx;height: 60rpx;border-radius: 10rpx;display: flex;justify-content: center;align-items: center;color: white;"
								v-if="item.status==-1">
								已失效
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<productWindow :attr="attr" :isShow='1' :iSplus='1' @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
			@ChangeCartNum="ChangeCartNum" @attrVal="attrVal" @iptCartNum="iptCartNum" id='product-window'
			:image="storeInfo.image" :maxCount="onceCount"></productWindow>
	</view>
</template>

<script>
	const app = getApp();
	import {
		getCartCounts
	} from '@/api/order.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import {
		mapGetters
	} from "vuex";
	import {
		silenceBindingSpread,
		configMap
	} from "@/utils";
	import productWindow from '@/components/productWindow';
	import {
		getCoupons,
		getShopCoupons,
		setCouponReceive,
		getDiy
	} from '@/api/api.js';
	import productConSwiper from '@/components/productConSwiper';
	import {
		getSeckillProductDetail,
		getProductParmas,
		getProductCode,
		collectAdd,
		collectDel,
		postCartAdd,
		copyPasswordApi,
		priceRuleApi
	} from '@/api/store.js';
	var sysHeight = uni.getSystemInfoSync().statusBarHeight;

	export default {
		components: {
			productConSwiper,
			productWindow
		},
		data() {
			return {
				isCoupon: 0,
				coupon: [], // 优惠券
				isYes: true,
				value: false,
				couponShow: false,
				imgUrls: [
					'https://cdn.uviewui.com/uview/swiper/1.jpg',
					'https://cdn.uviewui.com/uview/swiper/2.jpg',
					'https://cdn.uviewui.com/uview/swiper/3.jpg',
				],
				typelist: [
					'按天', '按月'
				],
				show: false,
				dateInfo: "请选择日期",
				productInfo: {},
				attr: {
					cartAttr: false,
					productAttr: [],
					productSelect: {}
				},
				productValue: [], //系统属性
				videoCoverImg: '',
				storeInfo: {}, //商品详情
				onceCount: 0,

				isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
				countDownHour: "00",
				countDownMinute: "00",
				countDownSecond: "00",
				datatime: '',
				sysHeight: sysHeight, //系统导航条高度
				//属性是否打开
				coupon: {
					'coupon': false,
					list: [],
				},
				attrTxt: '选择', //属性页面提示
				attrValue: '', //已选属性
				animated: false, //购物车动画
				id: 0, //商品id
				replyCount: 0, //总评论数量
				reply: [], //评论列表
				cart_num: 1, //购买数量
				isOpen: false, //是否打开属性组件
				actionSheetHidden: true,
				posterImageStatus: false,
				storeImage: '', //海报产品图
				PromotionCode: '', //二维码图片
				canvasStatus: false, //海报绘图标签
				posterImage: '', //海报路径
				posterbackgd: '/static/images/posterbackgd.png',
				// uid: 0, //用户uid
				circular: false,
				autoplay: false,
				interval: 3000,
				duration: 500,
				clientHeight: "",
				priceRule: "",
				replyChance: 0,
				CartCount: 0,
				isDown: true,
				onceCount: 0,
				posters: false,
				weixinStatus: false,
				description: '',
				navActive: 0,
				H5ShareBox: false, //公众号分享图片
				activity: [],
				retunTop: true, //顶部返回
				navH: "",
				navList: [],
				opacity: 0,
				scrollY: 0,
				topArr: [],
				toView: '',
				height: 0,
				heightArr: [],
				lock: false,
				scrollTop: 0,
				tagStyle: {
					img: 'width:100%;display:block;'
				},
				// 动画状态
				showAnimate: true,
				domain: HTTP_REQUEST_URL,
				currSpid: "",
				codeImg: "",
				shipping: "",
				guarantee: [],
				recommend: [],
				shippingValue: "",
				isCopy: false,
				copyUrl: '',
				services_type: "",
				specsInfo: {
					show: false,
					params: []
				},
				currentPage: false,
				homeTop: 59,
				mer_id: 0,
				id: 0,
				selectNavList: [{
						name: '首页',
						icon: 'icon-shouye8',
						url: '/pages/index/index',
						after: 'dialog_after'
					},
					{
						name: '搜索',
						icon: 'icon-sousuo6',
						url: '/pages/columnGoods/goods_search_con/index',
						after: 'dialog_after'
					},
					{
						name: '购物车',
						icon: 'icon-gouwuche7',
						url: '/pages/order_addcart/order_addcart',
						after: 'dialog_after'
					},
					{
						name: '我的收藏',
						icon: 'icon-shoucang3',
						url: '/pages/users/user_goods_collection/index',
						after: 'dialog_after'
					},
					{
						name: '个人中心',
						icon: 'icon-gerenzhongxin1',
						url: '/pages/user/index'
					},
				],
				diyActive: 0,

			};
		},
		computed: configMap(['hide_mer_status', 'site_name', 'share_pic'], mapGetters(['isLogin', 'uid', 'viewColor'])),
		onLoad(options) {
			let that = this
			this.id = options.id
			that.currSpid = options.spid
			app.globalData.spid = options.spid;
			this.getProductInfo()
			that.homeTop = (that.sysHeight + 8) * 2;
		},
		methods: {

			receiveCoupon(item) {
				let that = this;
				if (that.isLogin === false) {
					toLogin()
				} else {
					setCouponReceive(item.coupon_id).then(res => {
						item.issue = 1
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}).catch(err => {
						uni.showToast({
							title: err,
							icon: 'none'
						})
					})
					that.getCoupon()
				}
			},
			getCoupon: function() {
				this.diyActive = 3
				if (this.coupon.length) {
					return;
				}
				getShopCoupons(this.mer_id).then(res => {
					console.log(res);
					this.coupon = res.data;
				});
			},
			iptCartNum: function(e) {
				this.$set(this.attr.productSelect, 'cart_num', e);
			},
			attrVal(val) {
				this.$set(this.attr.productAttr[val.indexw], 'index', this.attr.productAttr[val.indexw].attr_values[val
					.indexn]);
			},
			ChangeCartNum: function(changeValue) {
				//changeValue:是否 加|减
				//获取当前变动属性
				let productSelect = this.productValue[this.attrValue];
				//如果没有属性,赋值给商品默认库存
				if (productSelect === undefined && !this.attr.productAttr.length)
					productSelect = this.attr.productSelect;
				//无属性值即库存为0；不存在加减；
				if (productSelect === undefined) return;
				let stock = productSelect.stock || 0;
				let num = this.attr.productSelect;
				if (changeValue) {
					num.cart_num++;
					if (num.cart_num > stock) {
						this.$set(this.attr.productSelect, "cart_num", stock);
						this.$set(this, "cart_num", stock);
					}
					if (num.cart_num > this.onceCount && this.onceCount > 0) {
						this.$set(this.attr.productSelect, "cart_num", this.onceCount);
						this.$set(this, "cart_num", this.onceCount);
						return this.$util.Tips({
							title: "秒杀时间段内最多购买" + this.onceCount + "件！"
						});
					}
				} else {
					num.cart_num--;
					if (num.cart_num < 1) {
						this.$set(this.attr.productSelect, "cart_num", 1);
						this.$set(this, "cart_num", 1);
					}
				}
			},
			onMyEvent: function() {
				this.$set(this.attr, 'cartAttr', false);
				this.$set(this, 'isOpen', false);
			},
			ChangeAttr: function(res) {
				let productSelect = this.productValue[res];
				if (productSelect && productSelect.stock > 0) {
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", res);
					this.$set(this, "attrTxt", "选择");
				} else {
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "选择");
				}
			},
			selecAttr: function() {
				this.$set(this.attr, 'cartAttr', true);
				this.$set(this, 'isOpen', true);
			},
			goBuy: function(e) {
				if (this.isLogin === false) {
					toLogin()
				} else {
					this.goCat(true);
				}
			},
			goCat: function(news) {
				let that = this,
					productSelect = that.productValue[this.attrValue];
				//打开属性
				if (that.attrValue) {
					//默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
					that.attr.cartAttr = !that.isOpen ? true : false;
				} else {
					if (that.isOpen) that.attr.cartAttr = true;
					else that.attr.cartAttr = !that.attr.cartAttr;
				}
				//只有关闭属性弹窗时进行加入购物车
				// if (that.attr.cartAttr === true && that.isOpen === false)
				// 	return (that.isOpen = true);
				//如果有属性,没有选择,提示用户选择
				if (
					that.attr.productAttr.length &&
					that.isOpen === true &&
					productSelect.stock == 0
				)
					return that.$util.Tips({
						title: "产品库存不足，请选择其它"
					});
				let q = {
					is_new: 1,
					product_id: that.id,
					cart_num: that.attr.productSelect.cart_num,
					product_attr_unique: that.attr.productSelect !== undefined ? that.attr.productSelect.unique :
						"",
					product_type: 0,
					spread_id: this.currSpid || '',
					begin_date: this.dateInfo
				};
				postCartAdd(q)
					.then(function(res) {
						that.isOpen = false;
						that.attr.cartAttr = false;
						if (news) {
							uni.navigateTo({
								url: '/pages/users/order_confirm/index?cartId=' + res.data.cart_id +
									'&seckillId=' + that.id
							});
						} else {
							that.$util.Tips({
								title: "添加购物车成功",
								success: () => {
									that.getCartCount(true);
								}
							});
						}
					})
					.catch(res => {
						that.isOpen = false;
						return that.$util.Tips({
							title: res
						});
					});
			},
			getProductInfo() {
				var that = this
				uni.request({
					url: `https://mer.syn.tswm.club/api/store/product/detail/${that.id}`,
					method: "GET",
					success(res) {
						if (res.data.status == 200) {
							that.productInfo = res.data.data
							uni.hideLoading();
							let storeInfo = res.data.data;
							if (storeInfo.video_link && storeInfo.slider_image.length > 1) {
								this.videoCoverImg = storeInfo.slider_image[0]
								storeInfo.slider_image.splice(0, 1)
							} else if (storeInfo.video_link && storeInfo.slider_image.length === 1) {
								this.videoCoverImg = storeInfo.slider_image[0]
							}
							that.$set(that, 'storeInfo', storeInfo);
							that.mer_id = that.storeInfo.mer_id
							that.$set(that, 'mer_id', storeInfo.mer_id);
							that.$set(that, 'description', storeInfo.content);
							that.$set(that, 'reply', res.data.data.topReply ? [res.data.data.topReply] : []);
							that.$set(that, 'replyCount', res.data.replayData && res.data.data.replayData.count);
							that.$set(that, 'replyChance', res.data.replayData && res.data.data.replayData.rate);
							console.log(res.data.data);
							that.$set(that.attr, 'productAttr', res.data.data.attr);
							that.$set(that, 'productValue', res.data.data.sku);
							that.$set(that, 'onceCount', res.data.data.once_pay_count);
							that.$set(that, 'activity', res.data.data.activity ? res.data.data.activity : []);
							that.$set(that, 'datatime', res.data.data.stop ? res.data.data.stop : []);
							that.$set(that, 'guarantee', res.data.data.guaranteeTemplate ? res.data.data
								.guaranteeTemplate : []);
							uni.setNavigationBarTitle({
								title: storeInfo.store_name.substring(0, 7) + "..."
							})
							that.$set(that, 'storeImage', that.storeInfo.image);
							getProductParmas(that.id).then((res) => {
								that.$set(that, 'description', res.data.data.content);
								if (that.description.type == 0) {
									that.description.content = that.description.content.replace(
										/<img/gi,
										'<img style="max-width:100%;height:auto;float:left;display:block" '
									);
									that.description.content = that.description.content.replace(
										/<video/gi,
										'<video style="width:100%;height:300px;display:block" '
									);
								}
								that.$set(that, 'shippingValue', res.data.data.temp ? res.data.data.temp
									.name : '');
								that.$set(that, 'shipping', res.data.data.temp ? res.data.data.temp.info :
									'');
								that.$set(that.specsInfo, 'params', res.data.data.params);
								that.$set(that.storeInfo, 'merchant', res.data.data.merchant);
								that.$set(that.storeInfo, 'spu_id', res.data.data.spu_id);
								that.$set(that.storeInfo, 'community', res.data.data.community);
								that.$set(that.storeInfo, 'top_name', res.data.data.top_name);
								that.$set(that.storeInfo, 'atmosphere_pic', res.data.data.atmosphere_pic);

							})
							// #ifdef H5
							if (that.isLogin) {
								that.getCartCount();
								that.ShareInfo();
								that.downloadFilePromotionCode();
							};

							// #endif
							// #ifdef APP-PLUS || MP
							that.getCartCount();
							// #endif
							setTimeout(function() {
								that.infoScroll();
							}, 500);
							that.DefaultSelect();
							that.getPricrRule(that.storeInfo.cate_id);
							that.getCoupon()
						} else {
							uni.showToast({
								icon: 'error',
								title: res.data.message
							})
						}
					}
				})
			},
			downloadFilePromotionCode() {
				let that = this;
				let type;
				// #ifndef MP
				type = 'wechat'
				// #endif
				// #ifdef MP
				type = 'routine'
				// #endif
				getProductCode(that.id, {
					type: type,
					product_type: 1
				}).then(async res => {
					this.codeImg = res.data.url;
					that.$set(that, 'isDown', false);
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
					that.posters = false;
					that.$set(that, 'isDown', false);
				});
			},
			/*获取价格说明*/
			getPricrRule() {
				priceRuleApi(this.storeInfo.cate_id).then(res => {
					this.priceRule = res.data
				}).catch(err => {

				});
			},
			ShareInfo() {
				let data = this.storeInfo;
				let href = location.href;
				if (this.$wechat.isWeixin()) {
					getUserInfo().then(res => {
						href =
							href.indexOf("?") === -1 ?
							href + "?spid=" + res.data.uid :
							href + "&spid=" + res.data.uid;

						let configAppMessage = {
							desc: data.store_info,
							title: data.store_name,
							link: href,
							imgUrl: data.image
						};
						this.$wechat.wechatEvevt([
							"updateAppMessageShareData",
							"updateTimelineShareData",
							"onMenuShareAppMessage",
							"onMenuShareTimeline"
						], configAppMessage).then(res => {}).catch(err => {
							console.log(err);
						})
					});
				}
			},
			DefaultSelect: function() {
				console.log(this.attr);
				let productAttr = this.attr.productAttr;
				let value = [];
				let arr = []
				let unSortArr = []
				for (var key in this.productValue) {
					if (this.productValue[key].stock > 0) {
						value = this.attr.productAttr.length ? key.split(",") : [];
						break;
					}
				}
				for (let i = 0; i < productAttr.length; i++) {
					this.$set(productAttr[i], "index", value[i]);
				}
				//sort();排序函数:数字-英文-汉字；
				let productSelect = this.productValue[value.join(",")];
				if (productSelect && productAttr.length) {
					this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this, "attrValue", value.join(","));
					this.$set(this, "attrTxt", "选择");
					if (productSelect.stock == 0) {
						this.$set(this.attr.productSelect, "cart_num", 0);
					} else {
						this.$set(this.attr.productSelect, "cart_num", 1);
					}
				} else if (!productSelect && productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", 0);
					this.$set(this.attr.productSelect, "unique", "");
					this.$set(this.attr.productSelect, "cart_num", 0);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "选择");
				} else if (!productSelect && !productAttr.length) {
					this.$set(
						this.attr.productSelect,
						"store_name",
						this.storeInfo.store_name
					);
					this.$set(this.attr.productSelect, "image", this.storeInfo.image);
					this.$set(this.attr.productSelect, "price", this.storeInfo.price);
					this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
					this.$set(this.attr.productSelect, "unique", this.storeInfo.unique || "");
					this.$set(this.attr.productSelect, "cart_num", 1);
					this.$set(this, "attrValue", "");
					this.$set(this, "attrTxt", "选择");
				} else if (productSelect && !productAttr.length) {
					this.$set(this.attr.productSelect, "store_name", this.storeInfo.store_name);
					this.$set(this.attr.productSelect, "image", productSelect.image);
					this.$set(this.attr.productSelect, "price", productSelect.price);
					this.$set(this.attr.productSelect, "stock", productSelect.stock);
					this.$set(this.attr.productSelect, "unique", productSelect.unique);
					this.$set(this, "attrValue", value.join(","));
					this.$set(this, "attrTxt", "选择");
					if (productSelect.stock == 0) {
						this.$set(this.attr.productSelect, "cart_num", 0);
					} else {
						this.$set(this.attr.productSelect, "cart_num", 1);
					}
				}
			},
			infoScroll: function() {
				var that = this,
					topArr = [],
					heightArr = [];
				for (var i = 0; i < that.navList.length; i++) { //productList
					//获取元素所在位置
					var query = uni.createSelectorQuery().in(this);
					var idView = "#past" + i;
					query.select(idView).boundingClientRect();
					query.exec(function(res) {
						var top = res[0].top;
						var height = res[0].height;
						topArr.push(top);
						heightArr.push(height);
						that.$set(that, 'topArr', topArr);
						that.$set(that, 'heightArr', heightArr);
					});
				};
			},
			getCartCount: function(isAnima) {
				let that = this;
				const isLogin = that.isLogin;
				if (isLogin) {
					getCartCounts().then(res => {
						that.CartCount = res.data[0].count;
						//加入购物车后重置属性
						if (isAnima) {
							that.animated = true;
							setTimeout(function() {
								that.animated = false;
							}, 500);
						}
					});
				}
			},
			chooseDate() {
				this.show = true
			},
			Datechange(e) {
				this.dateInfo = e.result
			},
			viewCoupon() {
				this.couponShow = true
			}

		}
	}
</script>

<style lang="scss">
	.couponPopup {
		padding: 24rpx;

		.couponPopup-title {
			font-weight: 700;
			font-size: 40rpx;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50rpx;
		}

		.couponList {
			margin-bottom: 30rpx;
			box-shadow: 5rpx 5rpx rgba(240, 240, 240, .5);
			border-radius: 20rpx;
			overflow: hidden;
			width: 100%;
			height: 200rpx;
			display: flex;

			.couponEarn {
				width: 30%;
				background-color: navajowhite;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: orange;
			}

			.couponMid {
				width: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.couponMid-top {
					font-size: 40rpx;
					font-weight: 700;
					margin-bottom: 30rpx;
				}

				.couponMid-bot {
					font-size: 24rpx;
				}
			}

			.couponbtn {
				width: 20%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btnbox {
					background-color: orange;
				}
			}
		}
	}

	.pageBox {
		width: 100%;
		background-color: rgba(240, 240, 240, .1);

		.pageFooter {
			position: fixed;
			bottom: 0;
			width: 100%;
			background-color: white;

			.btn-box {
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				width: 100%;
				height: 140rpx;
				font-weight: 700;

				.btn-box-left {
					width: 25%;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.btn-box-right {
					border-radius: 10rpx;
					width: 75%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: orange;
					color: white;
				}
			}
		}

		.titleBox {
			width: 100%;
			height: 130rpx;
			background-color: orange;
			display: flex;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;
			padding: 30rpx;

			.title {
				width: 70%;
				font-size: 28rpx;
				font-weight: 700;
				color: white;
			}

			.title-btn {
				height: 50rpx;
				background-color: white;
				width: 100rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10rpx;
			}
		}

		.price-box {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: white;

			.depositInfo {
				text-decoration: line-through;
				color: gray;
			}

			.priceInfo {
				color: orange;
				font-size: 40rpx;
				font-weight: 700;
			}

			.price-box-right {
				width: 100rpx;
				height: 50rpx;
				background-color: navajowhite;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 20rpx 0 0 20rpx;
				transform: translateX(30rpx);
				color: dimgray;

			}
		}

		.saleInfo {
			display: flex;
			margin-top: 10rpx;
			background-color: white;
			flex-direction: column;
			box-sizing: border-box;

			.manjianInfo {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 80rpx;
				border-bottom: 1rpx solid rgba(240, 240, 240, .6);
			}

			.couponInfo {
				padding: 20rpx;
				display: flex;
				height: 80rpx;
				justify-content: space-between;
				align-items: center;
			}
		}

		.store-box {
			margin-top: 10rpx;
			background-color: white;

		}

		.storeInfo {
			display: flex;
			box-sizing: border-box;

			.storeInfo-Box {
				width: 100%;
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.Offline-box {
			background-color: white;
			margin-top: 10rpx;
		}

		.OfflineInfo {
			padding: 30rpx;
			box-sizing: border-box;
			display: flex;

			image {
				width: 150rpx;
				height: 150rpx;
				margin-right: 30rpx;
			}

			.OfflineInfo-Box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.OfflineInfo-Box-name {
					font-size: 30rpx;
					font-weight: 700;
				}
			}
		}

		.goodDeatail-box {
			background-color: white;
			margin-top: 10rpx;
			width: 100%;
			box-sizing: border-box;

			.goodDeatail-info {
				padding: 30rpx;
				width: 100%;
				height: 200rpx;

			}
		}

		.choose-type-box {
			margin-top: 10rpx;
			background-color: white;
			width: 100%;

			.choose-type-form {
				padding: 30rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;

				.choose-type-input {
					display: flex;
					align-items: center;
					margin-top: 30rpx;

					input {
						width: 200rpx;
					}
				}
			}
		}
	}

	.classHeader {
		padding: 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;

		.tip {
			width: 10rpx;
			height: 35rpx;
			background-color: orange;
			margin-right: 10rpx;
		}

		.header-name {
			font-weight: 700;
		}
	}
</style>